<template>
  <section class="page">
    <headerbar>通知情况 </headerbar>
    <!--学员名单-->
    <section class="pdv-3">
      <section class="people-list">
        <div class="d-scroll list-text" style="">
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
            <cube-swipe>
              <transition-group name="swipe" tag="div">
                <div class="" v-for="(item, index) in data" :key="item.id">
                  <cube-swipe-item ref="swipeItem" :index="index">
                    <div class="people-item bg-white block">
                      <section class="people-info">
                        <span class="name">{{ item.userName }}</span>
                        <span class="name color-tip tip">{{
                          item.readResult
                        }}</span>
                        <span class="name color-tip tip">{{
                          item.feedResult
                        }}</span>
                      </section>
                      <span class=""></span>
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div class="text-center no-data" v-if="data.length === 0">
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="data.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </section>
    </section>
  </section>
</template>

<script>
export default {
  name: "noticeNoticePeople",
  data() {
    return {
      data: [],
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      pageIndex: 1,
      msgId: "",
    };
  },
  created() {
    this.msgId = this.$route.params.msgId;
    this.loadData();
  },
  methods: {
    loadData() {
      let data = {
        loginId: "3750",
        msgId: this.msgId,
        pageNo: this.pageIndex + "",
        pageSize: "20",
      };
      this.fetchService.assignUserList(data).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.pageIndex++;
        this.data = this.data.concat(res.data || []);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
  },
};
</script>

<style scoped lang="scss">
.people-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  .name {
    &:first-child {
      width: 50%;
      flex: 1;
      white-space: nowrap;
      word-break: break-all;
    }
  }
  .tip {
    flex-shrink: 0;
    padding: 0 20px;
    text-align: center;
  }
}
</style>
